<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>社交标签广场 - 高级筛选与多样式展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4285F4;
            --secondary: #8E24AA;
            --success: #0F9D58;
            --warning: #FF9800;
            --danger: #F44336;
            --light: #F8F9FA;
            --dark: #202124;
            --gray: #5F6368;
            --light-gray: #E8EAED;
            --border-radius: 8px;
            --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--gray);
            font-size: 20px;
        }
        
        /* 搜索栏 */
        .search-container {
            padding: 16px;
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 12px 16px 12px 40px;
            border-radius: 24px;
            border: 1px solid var(--light-gray);
            background-color: white;
            font-size: 15px;
            box-shadow: var(--card-shadow);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        /* 筛选区域 */
        .filter-section {
            background-color: white;
            padding: 16px;
            border-radius: var(--border-radius);
            margin: 0 16px 16px;
            box-shadow: var(--card-shadow);
        }
        
        .filter-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .filter-chip {
            padding: 6px 12px;
            background-color: var(--light);
            border-radius: 16px;
            font-size: 14px;
            color: var(--dark);
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-chip.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-chip .close-icon {
            display: none;
        }
        
        .filter-chip.active .close-icon {
            display: inline-block;
        }
        
        .advanced-filters {
            display: flex;
            gap: 12px;
            margin-bottom: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
        
        .advanced-filters::-webkit-scrollbar {
            display: none;
        }
        
        .filter-dropdown {
            flex-shrink: 0;
        }
        
        .filter-select {
            padding: 8px 32px 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--light-gray);
            background-color: white;
            font-size: 14px;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 12px;
        }
        
        .filter-btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .reset-btn {
            background-color: transparent;
            border: 1px solid var(--light-gray);
            color: var(--gray);
        }
        
        .apply-btn {
            background-color: var(--primary);
            border: none;
            color: white;
        }
        
        /* 视图切换 */
        .view-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px 12px;
        }
        
        .view-text {
            font-size: 16px;
            font-weight: 600;
        }
        
        .view-buttons {
            display: flex;
            gap: 8px;
        }
        
        .view-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid var(--light-gray);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 标签列表通用样式 */
        .tag-section {
            padding: 0 16px 16px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
        }
        
        .section-actions {
            display: flex;
            gap: 8px;
        }
        
        .section-btn {
            font-size: 14px;
            color: var(--primary);
            background: none;
            border: none;
        }
        
        .tag-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 16px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
        }
        
        /* 标签样式 */
        .tag {
            padding: 10px 14px;
            border-radius: var(--border-radius);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: white;
            border: 1px solid var(--light-gray);
        }
        
        .tag.small {
            padding: 6px 12px;
            font-size: 13px;
        }
        
        .tag.large {
            padding: 12px 16px;
            font-size: 16px;
        }
        
        .tag.primary {
            background-color: rgba(66, 133, 244, 0.1);
            color: var(--primary);
            border-color: rgba(66, 133, 244, 0.2);
        }
        
        .tag.secondary {
            background-color: rgba(142, 36, 170, 0.1);
            color: var(--secondary);
            border-color: rgba(142, 36, 170, 0.2);
        }
        
        .tag.success {
            background-color: rgba(15, 157, 88, 0.1);
            color: var(--success);
            border-color: rgba(15, 157, 88, 0.2);
        }
        
        .tag.warning {
            background-color: rgba(255, 152, 0, 0.1);
            color: var(--warning);
            border-color: rgba(255, 152, 0, 0.2);
        }
        
        .tag.danger {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--danger);
            border-color: rgba(244, 67, 54, 0.2);
        }
        
        .tag.image-tag img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .tag.count-tag .count {
            margin-left: auto;
            padding: 2px 8px;
            background-color: var(--light-gray);
            border-radius: 10px;
            font-size: 12px;
            color: var(--gray);
        }
        
        .tag:hover, .tag.active {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .tag.primary:hover, .tag.primary.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .tag.secondary:hover, .tag.secondary.active {
            background-color: var(--secondary);
            color: white;
            border-color: var(--secondary);
        }
        
        .tag.success:hover, .tag.success.active {
            background-color: var(--success);
            color: white;
            border-color: var(--success);
        }
        
        .tag.warning:hover, .tag.warning.active {
            background-color: var(--warning);
            color: white;
            border-color: var(--warning);
        }
        
        .tag.danger:hover, .tag.danger.active {
            background-color: var(--danger);
            color: white;
            border-color: var(--danger);
        }
        
        .cloud-tag {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            background-color: var(--light);
            color: var(--gray);
        }
        
        .cloud-tag.size-sm { font-size: 12px; }
        .cloud-tag.size-md { font-size: 14px; }
        .cloud-tag.size-lg { font-size: 16px; font-weight: 500; }
        .cloud-tag.size-xl { font-size: 18px; font-weight: 600; }
        
        .cloud-tag:hover, .cloud-tag.active {
            background-color: var(--primary);
            color: white;
            transform: scale(1.05);
        }
        
        /* 水平滚动标签 */
        .scrollable-tags {
            overflow-x: auto;
            padding: 0 16px 16px;
        }
        
        .horizontal-tags {
            display: flex;
            gap: 10px;
            min-width: max-content;
            padding-bottom: 8px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--light-gray);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 10px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 筛选结果 */
        .filter-results {
            padding: 12px 16px;
            background-color: rgba(66, 133, 244, 0.1);
            color: var(--primary);
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 16px 16px;
            border-radius: var(--border-radius);
        }
        
        .clear-filters {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 加载更多 */
        .load-more {
            width: calc(100% - 32px);
            margin: 0 16px 24px;
            padding: 12px;
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: var(--border-radius);
            color: var(--dark);
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 响应式调整 */
        @media (min-width: 576px) {
            .tag-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">标签广场</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索标签、话题或兴趣...">
        </div>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-section">
        <div class="filter-title">热门筛选</div>
        <div class="filter-options">
            <button class="filter-chip active">
                全部
                <i class="fas fa-times close-icon"></i>
            </button>
            <button class="filter-chip">
                科技
                <i class="fas fa-times close-icon"></i>
            </button>
            <button class="filter-chip">
                生活
                <i class="fas fa-times close-icon"></i>
            </button>
            <button class="filter-chip">
                娱乐
                <i class="fas fa-times close-icon"></i>
            </button>
            <button class="filter-chip">
                美食
                <i class="fas fa-times close-icon"></i>
            </button>
            <button class="filter-chip">
                旅行
                <i class="fas fa-times close-icon"></i>
            </button>
            <button class="filter-chip">
                音乐
                <i class="fas fa-times close-icon"></i>
            </button>
        </div>
        
        <div class="advanced-filters">
            <div class="filter-dropdown">
                <select class="filter-select">
                    <option>排序方式</option>
                    <option>热门程度</option>
                    <option>最新发布</option>
                    <option>关注人数</option>
                </select>
            </div>
            <div class="filter-dropdown">
                <select class="filter-select">
                    <option>内容类型</option>
                    <option>全部内容</option>
                    <option>文章</option>
                    <option>动态</option>
                    <option>活动</option>
                </select>
            </div>
            <div class="filter-dropdown">
                <select class="filter-select">
                    <option>时间范围</option>
                    <option>全部时间</option>
                    <option>最近一周</option>
                    <option>最近一月</option>
                    <option>最近一年</option>
                </select>
            </div>
            <div class="filter-dropdown">
                <select class="filter-select">
                    <option>参与人数</option>
                    <option>不限</option>
                    <option>100人以上</option>
                    <option>1000人以上</option>
                    <option>10000人以上</option>
                </select>
            </div>
        </div>
        
        <div class="filter-actions">
            <button class="filter-btn reset-btn">重置</button>
            <button class="filter-btn apply-btn">应用筛选</button>
        </div>
    </div>
    
    <!-- 筛选结果提示 -->
    <div class="filter-results">
        <div>已筛选：全部标签</div>
        <button class="clear-filters">
            <i class="fas fa-times"></i> 清除筛选
        </button>
    </div>
    
    <!-- 视图切换 -->
    <div class="view-toggle">
        <div class="view-text">推荐标签</div>
        <div class="view-buttons">
            <button class="view-btn active" title="列表视图">
                <i class="fas fa-th-list"></i>
            </button>
            <button class="view-btn" title="网格视图">
                <i class="fas fa-th"></i>
            </button>
            <button class="view-btn" title="标签云视图">
                <i class="fas fa-cloud"></i>
            </button>
        </div>
    </div>
    
    <!-- 1. 彩色标签列表 -->
    <div class="tag-section">
        <div class="section-header">
            <div class="section-title">分类标签</div>
            <div class="section-actions">
                <button class="section-btn">更多</button>
            </div>
        </div>
        <div class="tag-list">
            <div class="tag primary active">
                <i class="fas fa-microchip"></i> 人工智能
            </div>
            <div class="tag primary">
                <i class="fas fa-laptop-code"></i> 编程开发
            </div>
            <div class="tag secondary">
                <i class="fas fa-camera"></i> 摄影
            </div>
            <div class="tag secondary">
                <i class="fas fa-paint-brush"></i> 设计
            </div>
            <div class="tag success">
                <i class="fas fa-utensils"></i> 美食
            </div>
            <div class="tag success">
                <i class="fas fa-seedling"></i> 园艺
            </div>
            <div class="tag warning">
                <i class="fas fa-plane"></i> 旅行
            </div>
            <div class="tag warning">
                <i class="fas fa-hiking"></i> 户外
            </div>
            <div class="tag danger">
                <i class="fas fa-music"></i> 音乐
            </div>
            <div class="tag danger">
                <i class="fas fa-film"></i> 电影
            </div>
        </div>
    </div>
    
    <!-- 2. 带图标签网格 -->
    <div class="tag-section">
        <div class="section-header">
            <div class="section-title">兴趣圈子</div>
            <div class="section-actions">
                <button class="section-btn">更多</button>
            </div>
        </div>
        <div class="tag-grid">
            <div class="tag image-tag active">
                <img src="https://picsum.photos/id/237/100/100" alt="宠物"> 宠物圈
            </div>
            <div class="tag image-tag">
                <img src="https://picsum.photos/id/96/100/100" alt="摄影"> 摄影圈
            </div>
            <div class="tag image-tag">
                <img src="https://picsum.photos/id/292/100/100" alt="穿搭"> 穿搭圈
            </div>
            <div class="tag image-tag">
                <img src="https://picsum.photos/id/431/100/100" alt="数码"> 数码圈
            </div>
            <div class="tag image-tag">
                <img src="https://picsum.photos/id/493/100/100" alt="美妆"> 美妆圈
            </div>
            <div class="tag image-tag">
                <img src="https://picsum.photos/id/365/100/100" alt="运动"> 运动圈
            </div>
        </div>
    </div>
    
    <!-- 3. 带数字标签列表 -->
    <div class="tag-section">
        <div class="section-header">
            <div class="section-title">热门话题</div>
            <div class="section-actions">
                <button class="section-btn">更多</button>
            </div>
        </div>
        <div class="tag-list">
            <div class="tag count-tag primary active">
                <i class="fas fa-fire"></i> 科技峰会
                <span class="count">2.4k</span>
            </div>
            <div class="tag count-tag primary">
                <i class="fas fa-music"></i> 音乐节
                <span class="count">1.8k</span>
            </div>
            <div class="tag count-tag primary">
                <i class="fas fa-film"></i> 电影节
                <span class="count">1.5k</span>
            </div>
            <div class="tag count-tag primary">
                <i class="fas fa-book"></i> 新书发布
                <span class="count">986</span>
            </div>
            <div class="tag count-tag primary">
                <i class="fas fa-running"></i> 马拉松
                <span class="count">754</span>
            </div>
            <div class="tag count-tag primary">
                <i class="fas fa-utensils"></i> 美食节
                <span class="count">1.2k</span>
            </div>
        </div>
    </div>
    
    <!-- 4. 水平滚动标签 -->
    <div class="scrollable-tags">
        <div class="horizontal-tags">
            <div class="tag small active">
                #职场经验分享
            </div>
            <div class="tag small">
                #副业赚钱攻略
            </div>
            <div class="tag small">
                #理财小白入门
            </div>
            <div class="tag small">
                #自媒体运营
            </div>
            <div class="tag small">
                #远程工作
            </div>
            <div class="tag small">
                #自由职业
            </div>
            <div class="tag small">
                #创业经验
            </div>
            <div class="tag small">
                #职场人际关系
            </div>
            <div class="tag small">
                #职业规划
            </div>
            <div class="tag small">
                #晋升技巧
            </div>
        </div>
    </div>
    
    <!-- 5. 标签云 -->
    <div class="tag-section">
        <div class="section-header">
            <div class="section-title">兴趣标签云</div>
            <div class="section-actions">
                <button class="section-btn">更多</button>
            </div>
        </div>
        <div class="tag-cloud">
            <div class="cloud-tag size-xl active">摄影</div>
            <div class="cloud-tag size-lg">咖啡</div>
            <div class="cloud-tag size-md">骑行</div>
            <div class="cloud-tag size-sm">园艺</div>
            <div class="cloud-tag size-lg">阅读</div>
            <div class="cloud-tag size-md">绘画</div>
            <div class="cloud-tag size-xl">音乐</div>
            <div class="cloud-tag size-sm">手工</div>
            <div class="cloud-tag size-md">登山</div>
            <div class="cloud-tag size-lg">电影</div>
            <div class="cloud-tag size-sm">陶艺</div>
            <div class="cloud-tag size-md">瑜伽</div>
            <div class="cloud-tag size-lg">美食</div>
            <div class="cloud-tag size-sm">编程</div>
            <div class="cloud-tag size-md">旅行</div>
            <div class="cloud-tag size-lg">健身</div>
            <div class="cloud-tag size-sm">围棋</div>
            <div class="cloud-tag size-md">写作</div>
        </div>
    </div>
    
    <!-- 6. 大型标签网格 -->
    <div class="tag-section">
        <div class="section-header">
            <div class="section-title">热门活动</div>
            <div class="section-actions">
                <button class="section-btn">更多</button>
            </div>
        </div>
        <div class="tag-grid">
            <div class="tag large secondary active">
                <i class="fas fa-running"></i> 城市马拉松
            </div>
            <div class="tag large secondary">
                <i class="fas fa-lightbulb"></i> 科技创新展
            </div>
            <div class="tag large secondary">
                <i class="fas fa-film"></i> 国际电影节
            </div>
            <div class="tag large secondary">
                <i class="fas fa-music"></i> 音乐节
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <button class="load-more">
        <i class="fas fa-spinner fa-spin"></i>
        <span>加载更多标签</span>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-tags nav-icon"></i>
            <span>标签</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle nav-icon"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签点击交互
        const allTags = document.querySelectorAll('.tag, .cloud-tag');
        allTags.forEach(tag => {
            tag.addEventListener('click', function() {
                // 对于同一组标签，点击时取消其他标签的选中状态
                const parentContainer = this.closest('.tag-list, .tag-grid, .tag-cloud, .horizontal-tags');
                if (parentContainer) {
                    parentContainer.querySelectorAll('.tag, .cloud-tag').forEach(t => {
                        t.classList.remove('active');
                    });
                }
                
                // 选中当前标签
                this.classList.add('active');
                
                // 显示选中的标签名称（实际应用中可跳转到对应内容页）
                const tagName = this.textContent.trim().replace(/#/g, '');
                showFilterResult(`已筛选：${tagName}`);
            });
        });
        
        // 筛选芯片交互
        const filterChips = document.querySelectorAll('.filter-chip');
        filterChips.forEach(chip => {
            chip.addEventListener('click', function() {
                // 全部标签特殊处理
                if (this.textContent.trim() === '全部') {
                    filterChips.forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                    showFilterResult('已筛选：全部标签');
                } else {
                    // 取消全部的选中状态
                    filterChips[0].classList.remove('active');
                    // 切换当前芯片状态
                    this.classList.toggle('active');
                    
                    // 收集所有选中的筛选条件
                    const activeFilters = Array.from(filterChips)
                        .filter(c => c.classList.contains('active'))
                        .map(c => c.textContent.trim());
                    
                    if (activeFilters.length > 0) {
                        showFilterResult(`已筛选：${activeFilters.join('、')}`);
                    } else {
                        filterChips[0].classList.add('active');
                        showFilterResult('已筛选：全部标签');
                    }
                }
            });
        });
        
        // 视图切换按钮
        const viewButtons = document.querySelectorAll('.view-btn');
        const tagSections = document.querySelectorAll('.tag-section, .scrollable-tags');
        
        viewButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                // 切换按钮状态
                viewButtons.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                // 根据视图类型切换展示方式
                const viewType = this.querySelector('i').classList.contains('fa-th-list') ? 'list' :
                                 this.querySelector('i').classList.contains('fa-th') ? 'grid' : 'cloud';
                
                // 实际应用中可以根据视图类型重新排列标签
                alert(`已切换到${viewType === 'list' ? '列表' : viewType === 'grid' ? '网格' : '标签云'}视图`);
            });
        });
        
        // 筛选操作
        document.querySelector('.apply-btn').addEventListener('click', function() {
            const sortValue = document.querySelector('.filter-select').options[document.querySelector('.filter-select').selectedIndex].text;
            showFilterResult(`已筛选：全部标签，排序方式：${sortValue}`);
        });
        
        // 重置筛选
        document.querySelector('.reset-btn').addEventListener('click', function() {
            filterChips.forEach((c, index) => {
                c.classList.toggle('active', index === 0);
            });
            
            document.querySelectorAll('.filter-select').forEach(select => {
                select.selectedIndex = 0;
            });
            
            showFilterResult('已筛选：全部标签');
        });
        
        // 清除筛选
        document.querySelector('.clear-filters').addEventListener('click', function() {
            filterChips.forEach((c, index) => {
                c.classList.toggle('active', index === 0);
            });
            
            document.querySelectorAll('.filter-select').forEach(select => {
                select.selectedIndex = 0;
            });
            
            allTags.forEach(tag => {
                tag.classList.remove('active');
            });
            
            showFilterResult('已筛选：全部标签');
        });
        
        // 显示筛选结果
        function showFilterResult(text) {
            document.querySelector('.filter-results div').textContent = text;
        }
        
        // 导航按钮交互
        document.getElementById('backBtn').addEventListener('click', () => {
            alert('返回上一页');
        });
        
        document.getElementById('moreBtn').addEventListener('click', () => {
            alert('更多选项');
        });
        
        // 加载更多
        document.querySelector('.load-more').addEventListener('click', function() {
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span> 加载中...</span>';
            
            // 模拟加载延迟
            setTimeout(() => {
                this.innerHTML = originalText;
                alert('已加载更多标签');
            }, 1500);
        });
        
        // 搜索功能
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const searchText = this.value.trim();
                if (searchText) {
                    showFilterResult(`搜索结果：${searchText}`);
                } else {
                    showFilterResult('已筛选：全部标签');
                }
            }
        });
    </script>
</body>
</html>

